<template>
  <div class="group-block noneditable">
    <component
      v-for="item of blockData.list"
      :is="getComponentName(item)"
      :key="item.blockId"
      :blockData="item"
      :data-group-id="item.groupId"
      :data-block-type="item.blockType"
    />
  </div>
</template>

<script>
import EditorTable from './Table.vue'
import EditorFigure from './Figure.vue'
import EditorFormula from './Formula.vue'
import Example from './Example.vue'
import NakedFigure from './NakedFigure.vue'
import Endline from './Endline.vue'
import ItemList from './ItemList.vue'
import ItemNote from './ItemNote.vue'
import TermBlock from './TermBlock.vue'
import Paragraph from './Paragraph.vue'
import { getComponentName } from '@/utils/helpers'

export default {
  name: 'BlockGroup',
  components: {
    EditorTable,
    EditorFigure,
    EditorFormula,
    Example,
    NakedFigure,
    TermBlock,
    Endline,
    Paragraph,
    ItemList,
    ItemNote
  },
  props: {
    blockData: {
      type: Object,
      default: () => {
        return {
          list: []
        }
      }
    }
  },
  methods: { getComponentName }
}
</script>
